<template>
    <!-- 编辑器容器，带有边框样式 -->
    <div style="border: 1px solid #ccc">
        <!-- 工具栏，带有底部边框样式，绑定到编辑器实例 -->
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" />
        <!-- 编辑器主体，高度固定，溢出隐藏，双向绑定到modelValue，创建时调用handleCreated方法 -->
        <Editor style="height: 400px; overflow-y: hidden;" v-model="modelValue" @onCreated="handleCreated" />
    </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入编辑器的CSS样式
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' // 导入富文本编辑器和工具栏组件
import { ref, shallowRef } from 'vue'; // 导入Vue的响应式和浅层响应式引用
import { uploadApi } from '@/api'; // 导入上传API

// 定义模型绑定，用于双向绑定编辑器的内容
const modelValue = defineModel();

// 浅层响应式引用，用于存储编辑器实例
const editorRef = shallowRef();

/**
 * 编辑器创建时的回调函数
 * 用于配置编辑器的自定义上传功能
 * @param editor - 编辑器实例
 */
const handleCreated = (editor: any) => {
    // 获取编辑器的配置对象
    let editorConfig = editor.getConfig();
    // 将编辑器实例赋值给响应式引用
    editorRef.value = editor;

    // 配置图片上传的自定义上传逻辑
    editorConfig.MENU_CONF['uploadImage'] = {
        async customUpload(file: any, insert: any) {
            // 获取文件名称
            let name = file.name;
            // 创建FileReader对象读取文件
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (event: any) => {
                // 读取完成后调用上传API
                uploadApi.upload.call({ name, base64: event.target.result }).then(res => {
                    // 插入上传成功的图片
                    insert(res, name, "");
                });
            }
        }
    };
    // 配置视频上传的自定义上传逻辑
    editorConfig.MENU_CONF['uploadVideo'] = {
        async customUpload(file: any, insert: any) {
            // 获取文件名称
            let name = file.name;
            // 创建FileReader对象读取文件
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (event: any) => {
                // 读取完成后调用上传API
                uploadApi.upload.call({ name, base64: event.target.result }).then(res => {
                    // 插入上传成功的视频
                    insert(res, "");
                });
            }
        }
    }
}
</script>